<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git 仓库解析 · RAG 控制台</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 text-slate-100 flex items-center justify-center px-4 py-10">
<div class="w-full max-w-xl bg-white/5 border border-white/10 rounded-[32px] backdrop-blur-xl shadow-[0_35px_90px_rgba(7,12,22,.7)] p-8 space-y-8">
    <header class="text-center space-y-3">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-white/10 rounded-full text-sm tracking-wide text-indigo-200">
            <span class="text-indigo-400 text-lg">🔍</span>
            <span>Git 仓库解析</span>
        </div>
        <h1 class="text-3xl font-semibold text-white">将仓库拉取到知识库</h1>
        <p class="text-slate-300 text-sm">填入仓库地址、凭证，即可自动克隆、切分并写入标签。</p>
    </header>

    <form id="repoForm" class="space-y-5">
        <label class="block space-y-2">
            <span class="text-xs uppercase tracking-[0.4em] text-slate-400">仓库地址</span>
            <input id="repoUrl" type="text" required
                   placeholder="https://github.com/user/project.git"
                   class="w-full bg-white/5 border border-white/15 rounded-2xl px-4 py-3 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
        </label>

        <label class="block space-y-2">
            <span class="text-xs uppercase tracking-[0.4em] text-slate-400">用户名</span>
            <input id="userName" type="text" required
                   placeholder="git 用户名"
                   class="w-full bg-white/5 border border-white/15 rounded-2xl px-4 py-3 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
        </label>

        <label class="block space-y-2">
            <span class="text-xs uppercase tracking-[0.4em] text-slate-400">密码 / Token</span>
            <input id="token" type="password" required
                   placeholder="Personal Access Token"
                   class="w-full bg-white/5 border border-white/15 rounded-2xl px-4 py-3 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
        </label>

        <button type="submit"
                class="w-full py-3 rounded-2xl bg-indigo-500 text-white text-sm tracking-wide shadow-lg shadow-indigo-900/50 hover:bg-indigo-400 transition disabled:opacity-60 disabled:cursor-not-allowed">
            开始解析
        </button>
    </form>

    <section id="statusBox" class="hidden bg-white/5 border border-white/10 rounded-2xl px-4 py-3 text-sm"></section>
</div>

<div id="overlay" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-10">
    <div class="w-16 h-16 border-4 border-white/20 border-t-indigo-400 rounded-full animate-spin"></div>
</div>

<script>
    const form = document.getElementById('repoForm');
    const statusBox = document.getElementById('statusBox');
    const overlay = document.getElementById('overlay');
    const submitBtn = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const repoUrl = document.getElementById('repoUrl').value.trim();
        const userName = document.getElementById('userName').value.trim();
        const token = document.getElementById('token').value.trim();

        if (!repoUrl || !userName || !token) {
            showStatus('请填写完整信息', true);
            return;
        }

        try {
            setLoading(true);
            showStatus('正在解析仓库，请稍后…');

            const response = await fetch('http://localhost:8090/api/v1/rag/analyze_git_repository', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({ repoUrl, userName, token })
            });

            const data = await response.json();
            if (response.ok && data.code === '0000') {
                showStatus('✅ 解析成功：已入库 ' + repoUrl, false);
                form.reset();
            } else {
                throw new Error(data.info || '服务端返回错误');
            }
        } catch (error) {
            showStatus(`❌ 解析失败：${error.message}`, true);
        } finally {
            setLoading(false);
        }
    });

    function setLoading(isLoading) {
        overlay.classList.toggle('hidden', !isLoading);
        submitBtn.disabled = isLoading;
    }

    function showStatus(message, isError = false) {
        statusBox.textContent = message;
        statusBox.classList.remove('hidden');
        statusBox.classList.toggle('text-rose-200', isError);
        statusBox.classList.toggle('text-emerald-200', !isError);
    }
</script>
</body>
</html>
